<template>
  <div class='box'>
    <div class="box_title">
      <span>LOG IN</span>
      <span>SIGN UP</span>
    </div>
    <input class="checkbox icon-mima" type="checkbox" id="reg-log" name="reg-log" />
    <label for="reg-log"></label>
    <div class="login_box">
      <h4 class="pb_3">Log In</h4>
      <el-form ref="loginFormRef" :model="loginForm" label-width="80px">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-user-solid" v-model="loginForm.user"></el-input>
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="loginForm.password"></el-input>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      loginForm: {
        user: "",
        password: "",
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getCheckbox() {
      console.log(111);
    }
  },
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>

.box {
  font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #c4c3ca;
	overflow-x: hidden;
  text-align: center;
}
.box_title {
  margin-top: 200px;
  margin-bottom: 30px;
  font-weight: 700;
  text-transform: uppercase;
  span {
    padding: 0 20px;
  }
}

.login_box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  max-width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 60px;
  background-color: #2a2b38;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
  backface-visibility: hidden;
  box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.3), inset 0 -8px 8px -8px rgba(0, 0, 0, 0.3), 
    0 8px 8px -8px rgba(0, 0, 0, 0.3), 0 -8px 8px -8px rgba(0, 0, 0, 0.3);
  }
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  padding: 0;
  margin: 10px auto;
  cursor: pointer;
  background-color: #ffeba7;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before{
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffeba7;
  background-color: #102770;
  font-family: 'unicons';
  content: '↖';
  z-index: 20;
  top: -10px;
  left: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label:before {
  transform: translateX(44px) rotate(-270deg);
}
</style>